<template>
  <div class="detail-tab3 content">
    <div class="content">
      <div style="display: flex; justify-content: space-between; align-items: center">
        <div class="title-small">风险衡量图</div>
        <div>
          <el-form
            ref="headerSearchForm"
            :model="headerSearchForm"
            :inline="true"
            label-width="100px"
          >
            <el-form-item label="挂钩曲线" prop="hookCurve">
              <el-select
                v-model="headerSearchForm.hookCurve"
                placeholder="请选择"
                size="mini"
                clearable
              >
                <el-option
                  v-for="(item, index) in guagouData"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="charts">
        <!-- 图表 -->
        <MultipleLine
          :id="'multipleLine'"
          :chartData="chartData"
          v-if="chartData.xAxisData.length > 0"
        />
        <div v-else style="text-align: center; padding: 100px">
          <span>暂无数据</span>
        </div>
      </div>
    </div>
    <div>
      <div class="title-small mg-b20">最新风险值</div>
      <el-table :data="tableData" class="tableBoxChild">
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
        <!-- <el-table-column label="序号" align="center" type="index">
        </el-table-column> -->
        <!-- <el-table-column prop="bondId" label="债券代码" align="center">
        </el-table-column>
        <el-table-column prop="bondSname" label="债券简称" align="center">
          <template slot-scope="scope">
            <span @click="goDetails(scope)" class="link">{{
              scope.row.bondSname
            }}</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="bondFname" label="债券名称" align="center">
        </el-table-column> -->
        <!-- <el-table-column prop="bondType" label="债券类别" align="center">
        </el-table-column> -->
        <el-table-column prop="riskLevel" label="风险衡量值" align="center">
        </el-table-column>
        <!-- <el-table-column prop="creditInterest" label="信用利差" align="center">
        </el-table-column>
        <el-table-column prop="termDays" label="剩余年限" align="center">
        </el-table-column>
        <el-table-column prop="issueTerm" label="发行年限" align="center">
        </el-table-column>
        <el-table-column prop="issueDate" label="发行日期" align="center">
        </el-table-column>
        <el-table-column prop="issueAmount" label="发行规模" align="center">
        </el-table-column>
        <el-table-column prop="couponRate" label="票面利率" align="center">
        </el-table-column>
        <el-table-column prop="remaningAmount" label="未尝余额" align="center">
        </el-table-column>
        <el-table-column prop="maturityStatus" label="债券状态" align="center">
        </el-table-column> -->
        <el-table-column prop="dataDate" label="数据日期" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import MultipleLine from "./charts/MultipleLine.vue";
import { HookCurve, RiskAssessment } from "@/api/customerManagement/bondRiskProfile.js";

export default {
  name: "DetailTab1",
  components: {
    MultipleLine,
  },
  props: {
    rowData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      headerSearchForm: {
        hookCurve: "",
      },
      guagouData: [],
      tableData: [],
      bondIdList: [],
      chartData: {
        xAxisData: [],
        data: [],
      },
    };
  },
  watch: {
    "headerSearchForm.hookCurve": {
      handler: function (newValue, oldValue) {
        this.getData();
        this.$emit("hookCurveChange", newValue);
      },
    },
  },
  mounted() {},
  created() {
    console.log("this.rowData.bondId", this.rowData.bondId);
    this.getOptions();
  },
  methods: {
    async getOptions() {
      const params = {
        bondId: this.rowData.bondId,
      };
      const data1 = await HookCurve(params);
      this.guagouData = data1.data;
      this.headerSearchForm.hookCurve = "国债收益率曲线";

      this.getData();
    },
    async getData() {
      const params = {
        bondId: this.rowData.bondId,
        hookCurve: this.headerSearchForm.hookCurve,
      };
      const { data } = await RiskAssessment(params);
      const data1 = JSON.parse(JSON.stringify(data));
      // data1.sort((a, b) => moment(a).diff(b) >= 0); //这是升序，倒序的话翻过来
      this.tableData = data1;
      this.tableData.sort((a, b) => {
        return b.dataDate - a.dataDate;
      });
      const chartData = {
        xAxisData: [],
        data: [
          {
            name: "风险评估",
            data: [],
          },
        ],
      };
      data.forEach((element) => {
        chartData.xAxisData.push(element.dataDate);
        chartData.data[0].data.push(element.riskLevel);
      });
      this.chartData = chartData;
    },
    // 跳转到数据详情
    goDetails(scope) {
      this.$emit("goDetailsTab", scope.row);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
}
.detail-tab3 {
  color: #ffffff;
  .title {
    font-size: 16px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  .title-small {
    font-size: 14px;
  }
  .mg-b20 {
    margin-bottom: 20px;
  }
  .charts {
    width: 100%;
    height: 300px;
  }
}
.link {
  color: #1f9bfd;
  border-bottom: 1px solid #1f9bfd;
  cursor: pointer;
}
</style>
